<template>

	<div v-if="showpage==0">
	<el-input v-model="formData.name" placeholder="请输入申请人" />
	<el-button class="searchBtn" type="info" :icon="Search" @click="searchFn">搜索</el-button>
	<el-button class="addBtn" type="info" :icon="CirclePlus" @click="goaddleave">申请</el-button>
	<el-table :data="tableDate" height="50vh">
		<el-table-column type="index" label="编号" width="110">
		</el-table-column>
		<el-table-column label="申请人" prop="userName" style="width:100px"></el-table-column>
		<el-table-column prop="typeName">
			<template #header>
			     <el-dropdown @command="handleCommand" trigger="click">
			        <span class="el-dropdown-link">
			          请假类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
			        </span>
			        <template #dropdown>
			          <el-dropdown-menu>
						<el-dropdown-item @click="searchall" :command="''">全部</el-dropdown-item>
			            <el-dropdown-item  v-for="item in typeoption" :command="item.typeId">{{item.typeName}}</el-dropdown-item>
			          </el-dropdown-menu>
			        </template>
			      </el-dropdown>
			</template>
			<template #default="{row}">
			    {{row.typeName}}
			</template>
		</el-table-column>
		<el-table-column label="请假时间" prop="createTime">
			<template #default="{row}">
				<span style="width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{row.createTime}}</span>
			</template>
		</el-table-column>
		<el-table-column label="审批状态" >
			<template #header>
			     <el-dropdown @command="handleCommand1" trigger="click">
			        <span class="el-dropdown-link">
			          审批状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
			        </span>
			        <template #dropdown>
			          <el-dropdown-menu>
						<el-dropdown-item :command="''" @click="searchall1">全部</el-dropdown-item>
						<el-dropdown-item command=0>待审批</el-dropdown-item>
						<el-dropdown-item command=1>审批通过</el-dropdown-item>
						<el-dropdown-item command=2>审批未通过</el-dropdown-item>
			          </el-dropdown-menu>
			        </template>
			      </el-dropdown>
			</template>
			
			<template #default="{row}">
				<span v-if="row.status==0" style="color:#ccc">待审批</span>
				<span v-if="row.status==1"  style="color:#accf94">审批通过</span>
				<span v-if="row.status==2"  style="color:red">审批未通过</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" prop="endLocation">
			<template #default="{row}">
				<span style="color: #88fc7e;margin-right: 10px;cursor:pointer;" @click="makeupdata(row)">修改</span>
				<span style="color: #ff4342;cursor:pointer;" @click="makedelate(row.loaId)">删除</span>
			</template>
		</el-table-column>
		<el-table-column>
			<template #default="{row}">
				<span style="color:#4d89c0;cursor:pointer;" @click="godetail(row.loaId)">详情</span>
			</template>
		</el-table-column>
	</el-table>
	<!-- <div v-else style="color: #ccc;text-align: center;margin-top: 20px;">暂无数据</div> -->
	
	<el-pagination
		layout="prev,pager,next" 
		:page-count="total" 
		:page-size="formData.pageSize" 
		v-model:current-page="formData.pageIndex"
		@current-change="changePage"
	></el-pagination>
	<el-dialog
	    v-model="dialogVisible"
	    title="提示"
	    width="400"
	  >
	    <div style="text-align: center;">
			确认撤销请假申请吗？
		</div>
	    <template #footer>
	      <div class="dialog-footer">
			  <el-button type="info" @click="delatesure" style="background-color: #106ab1;color: white;">
			    确认
			  </el-button>
	        <el-button @click="dialogVisible = false" type="info" >取消</el-button>
	      </div>
	    </template>
	  </el-dialog>
	  
		<!-- 修改申请 -->
		<el-dialog
		    v-model="dialogVisible1"
		    width="500"
		  >	
		  <h3 style="text-align: center;margin-bottom: 20px;">修改</h3>
		    <el-form
		    	ref="formDataRef"
		        style="max-width: 300px;margin: 0 auto;"
		        :model="modelData"
		        :rules="rules"
		    >
					<el-form-item label="申请人:" label-width="100" prop="userName">
						<el-input v-model.number="modelData.userName" placeholder="请输入申请人" disabled/>
					</el-form-item>
		    		<el-form-item label="请假天数:" label-width="100" prop="num">
		    			<el-input v-model.number="modelData.num" placeholder="请输入请假天数" />
		    		</el-form-item>
		    		<el-form-item label="请假原因:" label-width="100" prop="content">
		    			<el-input placeholder="说明原因" v-model="modelData.content"></el-input>
		    		</el-form-item>
		    		<el-form-item label="请假类型:" prop="typeId" label-width="100">
		    			<el-select v-model="modelData.typeId" placeholder="请选择请假类">
		    				<!-- <el-option label="Zone one" value="shanghai" v-for="typeoption" /> -->
		    				<!-- <el-option label="Zone one" value="shanghai" />
		    				<el-option label="Zone two" value="beijing" /> -->
		    			<el-option 
		    			v-for="item in typeoption" 
		    			:label="item.typeName" 
		    			:value="item.typeId"
		    			:key="item.typeId"
		    			 />
		    				
		    			</el-select>
		    		</el-form-item>
		    		<el-form-item label="审批人:" prop="adminId" label-width="100">
		    			<el-select v-model="modelData.adminId" placeholder="请选择审批人">
		    				<el-option
		    				v-for="item in justpersonoptin" 
		    				:label="item.userName" 
		    				:value="item.userId"
		    				:key="item.userId"
		    				 />
		    			</el-select>
		    		</el-form-item>
		    	
		    		<el-form-item prop="startTime" label="起始时间:" label-width="100">
		    		  <el-date-picker
		    			v-model="modelData.startTime"
		    			type="date"
		    			aria-label="Pick a date"
		    			placeholder="请选择起始时间"
		    			style="width: 190px"
		    		  />
		    		</el-form-item>
		    		<el-form-item prop="endTime" label="截止时间:" label-width="100">
		    		  <el-date-picker
		    			v-model="modelData.endTime"
		    			type="date"
		    			aria-label="Pick a date"
		    			placeholder="请选择截止时间"
		    			style="width: 190px;"
		    		  />
		    		</el-form-item>
		    </el-form>
			
		    <template #footer>
		      <div style="text-align: center;">
				  <el-button @click="updatasure(formDataRef)" type="info" style="background-color: #106ab1;color: white;">
				    确认
				  </el-button>
		        <el-button @click="dialogVisible1 = false" type="info">取消</el-button>
		        
		      </div>
		    </template>
		  </el-dialog>
		
	  
	</div>
	<!-- 确认删除对话框 -->	
	<Leaveadd v-else-if="showpage==1" @back="back"></Leaveadd>
	<Leavedetail v-else-if="showpage==2" @back="back"></Leavedetail>
</template>

<script setup lang="ts">
	import { reactive, ref ,onMounted} from 'vue';
	import {teacherleave,teacherleaveapply} from "@/api/wrd";
	import {justperson,leaveType,delateleave,updataleave} from "@/api/wrd";
	import Leaveadd from './leaveadd.vue';
	import Leavedetail from './leavedetail.vue';
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import type {leavetypeResponseType,teacherleaveResponseType,justpersonresponseType} from "../modal/wrd/leave";
	
	import { ArrowDown } from '@element-plus/icons-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	const dialogVisible = ref(false)
	const dialogVisible1 = ref(false)
	let formDataRef=ref<any>(null)
	
	//表单验证
	const checkUserName=(rule:any,value:any,callback:any)=>{
		let reg=/^[0-9]+$/
		if (value === '') {
		    callback(new Error('请假天数不能为空'))
		  } else if (!reg.test(value)) {
		    callback(new Error("请输入数字"))
		  } else {
		    callback()
		  }
	}
	
	let rules=reactive<FormRules>({
		num:[
			{
				validator:checkUserName,
				required: true,
				trigger: 'blur'
			}
		],
		content:[
			{
				required: true,
				trigger: 'blur',
				message:"请假说明不能为空"
			}
		],
		typeId:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择请假类型"
			}
		],
		adminId:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择审批人"
			}
		],
		startTime:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择起始时间"
			}
		],
		endTime:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择结束时间"
			}
		],
	})
	
	
	
	
	const handleCommand = (command: string | number | object) => {
	  // console.log(command)
	  formData.typeId=command
	  teacherleaveFn()
	}
	const handleCommand1 = (command: string | number | object) => {
	  // console.log(command)
	  formData.status=command
	  teacherleaveFn()
	}
	const searchall=()=>{
		formData.typeId=''
		formData.adminId=''
		formData.status=''
		formData.name=''
		teacherleaveFn()
	}
	const searchall1=()=>{
		formData.typeId=''
		formData.adminId=''
		formData.status=''
		formData.name=''
		teacherleaveFn()
	}
	const searchFn=()=>{
		teacherleaveFn()
	}
	//员工请假列表
	// interface formDatatype{
	// 	pageIndex:number,
	// 	pageSize:number,
	// 	adminId:string,
	// 	status:string,
	// 	typeId:string,
	// 	name:string
	// }	
	let tableDate=ref<any>([])
	let total=ref<number|undefined>(0)
	let showpage=ref(0)
	let formData:any=reactive({
		pageIndex:1,
		pageSize:5,
		adminId:'',
		status:'',
		typeId:'',
		name:''
	})
	const teacherleaveFn=async()=>{
		let obj:any={}
		for(let i in formData){
			if(formData[i]){
				obj[i]=formData[i]
			}
		}
		// console.log("obj",obj)
		let res:teacherleaveResponseType | undefined=await teacherleave(obj)
		tableDate.value=res?.data
		total.value=res?.pageCount
		// console.log("老师请假列表",res)
	}
	//去申请
	const goaddleave=()=>{
		showpage.value=1
		// console.log(showpage.value)
	}
	//回到父页面
	const back=()=>{
		searchFn()	
		showpage.value=0
	}
	
	//查询请假类型
	let typeoption=ref<any>([])
	const leaveTypeFn=async()=>{
		let res:leavetypeResponseType|undefined = await leaveType()
		typeoption.value=res
		// console.log(typeoption.value)
		// console.log("请假类型",res)
	}
	//查询审批人
	let justpersonoptin=ref<any>([])
	const justpersonFn=async()=>{
		let res:justpersonresponseType|undefined= await justperson({
			userId: sessionStorage.getItem('userId')
		})
		// console.log("审批人",res)
		justpersonoptin.value=res
	}
	//删除申请
	const makedelate=(v:any)=>{
		// console.log(v)
		sessionStorage.setItem("loaId",v)
		dialogVisible.value=true
	}
	const delatesure=async()=>{
		let res=await delateleave({
			loaId:sessionStorage.getItem("loaId")
		})
		// console.log("删除申请",res)
		dialogVisible.value=false
		if(!res){
			ElMessage({
				type: 'success',
				message: `删除成功`,
			  })
		}
		sessionStorage.removeItem("loaId")
		searchFn()	
	}
	//去详情
	const godetail=(v:any)=>{
		sessionStorage.setItem("loaId",v)
		showpage.value=2
	}
	//点击修改
	let modelData=reactive<any>({})
	const makeupdata=(row:any)=>{
		// console.log(row)
		Object.assign(modelData,row)
		dialogVisible1.value=true
	}
	const updatasure=async(formEl:FormInstance)=>{
		formEl.validate(async (valid:boolean,fileds)=>{
			if(valid){
				let res=await updataleave({
					userId:modelData.userId,
					loaId:modelData.loaId,
					num:modelData.num,
					adminId:modelData.adminId,
					content:modelData.content,
					typeId:modelData.typeId,
					startTime:modelData.startTime,
					endTime:modelData.endTime
				})
				// console.log('修改申请',res)
				dialogVisible1.value=false
				if(!res){
					ElMessage({
						type: 'success',
						message: `修改成功`,
					})
					teacherleaveFn()
				}
			}
		})
	}
	
	
	//分页
	const changePage = (page:any) => {
		formData.pageIndex = page;
		searchFn()	
	}
	onMounted(()=>{
		teacherleaveFn()
		leaveTypeFn()
		justpersonFn()
		// console.log(123)
	})
</script>

<style scoped lang="less">
	.example-showcase .el-dropdown-link {
	  cursor: pointer;
	  color: var(--el-color-primary);
	  display: flex;
	  align-items: center;
	}
	.el-select{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	.el-table{
	        margin-top: 20px;
	    }
	    .el-table{
	        --el-table-border-color:none;
	        --el-table-borde:none;
	        --el-table-bg-color:none !important;    
	        --el-table-header-bg-color:#f3f8fd;
	        --el-table-header-text-color:#333 !important
	    }
	    /* 表格间隙 */
	    :deep(.el-table__body) {
	      -webkit-border-vertical-spacing: 9px;
	}
   .el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}

	// :deep(tbody tr td){
	// 	padding: 0;
	// 	margin-top: 10px;
	// }
	// :deep(.el-table thead tr th){
	// 	// background-color: none;
	// 	color: #000;
	// }
	// :deep(.el-table){
	// 	--el-table-border-color:none;
	// 	--el-table-borde:none;
	// 	// background-color: var(--el-pagination-button-disabled-bg-color);
	// 	--el-table-bg-color:none;
	// }
	// :deep(.el-table .el-table__cell){
	//     text-align: center !important;
	// }
	// ::v-deep .el-table__body{
	//   //-webkit-border-horizontal-spacing: 13px;  // 水平间距
	//   -webkit-border-vertical-spacing: 13px;  // 垂直间距
	// }
	// :deep(.el-pagination) {
	// 	--el-pagination-bg-color: none;
	// 	--el-pagination-button-disabled-bg-color:none;
	// }
	
	.contentcom{
		margin: 20px;
	}
	
	.el-row {
		display: flex;
		justify-content: right;
	}
	
	.el-pagination {
		justify-content: center;
	}
	
	/* 	.example-showcase .el-dropdown + .el-dropdown {
	  margin-left: 5px;
	} */
	// .el-button--small {
	
	// 	width: 20px;
	// }
	
	// .el-input {
	// 	width: 15%;
	// 	margin-right: 10px;
	// }
	.example-showcase .el-dropdown-link {
	  cursor: pointer;
	  // color: var(--el-color-primary);
	  display: flex;
	  align-items: center;
	}
	:deep(.el-row) {
		display: flex;
		// justify-content: space-between;
	}
	
	.statusColorRed {
		color: red;
	}
	
	.statusColorGreen {
		color: lawngreen
	}
	
	p{
		margin: 0;
	}
	.footer{
		font-size: 20px;
		.footerbox{
				font-size: 30px;
		}
	}
	.el-pagination {
		justify-content: center;
	}
	.btnsearch{
		background-color: #0f6ab1;
		color: white;
	}
	.btnsearch:hover{
		background-color: #0f6ab1;
		color: white;
	}
	.applybtn{
		background-color: #00a0e8;
		color: white;
	}
	.applybtn:hover{
		background-color: #00a0e8;
		color: white;
	}
	.inp{
		width: 200px;
		height: 30px;
	}
	.textwrap{
		
	}
	.searchheader{
		display: flex;
		justify-content: space-between;
		align-items: center
	}
	.searchbox{
		display: flex;
		align-items: center;
	}
	
	
</style>